---
title: GraphiQL 4.1 is Released
tags: [announcements, grants]
date: 2025-05-31
byline: Dimitri Postolov
---

import { Callout } from "nextra/components"

I'm thrilled to announce the release of **GraphiQL 4.1**! 🎉

Thanks to funding from the **GraphQL Foundation**, I'm working on migrating
GraphiQL to the Monaco code editor — a long-awaited update that's been on our
roadmap for years.

> In fact, the [original issue](https://github.com/graphql/graphiql/issues/2326)
> was opened over **three years ago**!

## Roadmap

Migrating to the Monaco editor is a major milestone, and to ensure a smooth
transition for everyone, I've broken it down into several incremental releases:

### GraphiQL 3.9

- Switched build system from Webpack to Vite
- Compiled the codebase using the new
  [React Compiler](https://react.dev/learn/react-compiler)

### GraphiQL 4

- Dropped support for React 16/17
- Added support for React 19
- Introduced a refreshed tabs UI
- New ESM-based CDN example
- Deprecated the legacy UMD CDN build

### GraphiQL 4.1 _(This release)_

- Standalone Doc Explorer plugin
- Standalone History plugin
- Migrated state management from React context to
  [zustand](https://zustand-demo.pmnd.rs)

### GraphiQL 5 _(Coming Soon)_

- Migration from Codemirror to
  [Monaco Editor](https://github.com/microsoft/monaco-editor)
- Replacing `codemirror-graphql` with
  [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)
- Support for comments in **Variables** and **Headers** editors
- New examples: **GraphiQL x Vite** and **GraphiQL x Next.js**

<Callout type="info">
  For the full roadmap, check out the [tracking issue on
  GitHub](https://github.com/graphql/graphiql/issues/3874).
</Callout>

## What's New

GraphiQL 4 serves as a gateway to the upcoming GraphiQL 5, which will be powered
by the Monaco editor, the same editor used in VSCode. Upgrading to GraphiQL 4 is
an essential step if you're already using React 19.

We've extracted **Doc Explorer** and **History** into standalone plugins,
allowing full customization of GraphiQL's built-in plugins in the **GraphiQL
5**.

Under the hood, we've replaced React context with zustand, making the internal
state management simpler and more maintainable, and enabling faster iteration on
new features.

### Time to Say Goodbye to UMD Builds!

With React 19,
[UMD builds have been removed](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed).
The React team now recommends using ESM-based CDNs like
[esm.sh](https://esm.sh).

We've updated the
[CDN example](https://github.com/graphql/graphiql/tree/main/examples/graphiql-cdn)
to show how to use GraphiQL with [esm.sh](https://esm.sh).

### How to Update

Follow the step-by-step guide in our
[GraphiQL 4 migration documentation](https://github.com/graphql/graphiql/blob/main/docs/migration/graphiql-4.0.0.md).

## What's Next?

The development of **GraphiQL 5** is almost complete! You can checkout the last
[Live Preview](https://deploy-preview-3234--graphiql-test.netlify.app).

The official release is just around the corner — arriving later **this June**!

## Stay Connected

Follow me, **Dima Machina**, on [𝕏](https://x.com/dimaMachina_) and
[GitHub](https://github.com/dimaMachina) to stay up to date with the latest
updates!
